<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>

  <input type="text" class="txt">
  <input type="button" class="btn">

  <ul></ul>
  
</body>
<script>

  class StrParser{
    constructor(){
      this.txt = document.querySelector(".txt");
      this.btn = document.querySelector(".btn");
      this.ul = document.querySelector("ul");
      this.getData();
      this.addEvent();
    }
    addEvent(){
      const that = this;
      this.btn.onclick = function(){
        that.userMsg = localStorage.getItem("userMsg") || "";
        that.userMsg += "," + that.txt.value;
        localStorage.setItem("userMsg", that.userMsg);
      }
      this.ul.onclick = function(eve){
        if(eve.target.nodeName === "LI"){
          that.txt.value = eve.target.innerText
        }
      }
    }
    getData(){
      this.userMsg = localStorage.getItem("userMsg") || "";
      this.arr = this.userMsg.split(",");

      this.renderList();
    }
    renderList(){
      let str = "";
      for(let i=1;i<this.arr.length;i++){
        str += `<li>${this.arr[i]}</li>`;
      }
      this.ul.innerHTML = str;
    }
  }

  new StrParser;
  
</script>
</html>